NaN

Css 进阶

Iconfont(字体图标)地址

  1. 图标链接地址: http://static.huruqing.cn/iconfont/
  2. 图标在线css地址: //at.alicdn.com/t/font_1456778_ct57mue31dj.css

(1) 定位样式

  1. 相对定位和绝对定位

    • 父元素设置为相对定位

    • 子元素设置为绝对定位

    • 在子元素中设置子元素在父元素中的位置

      注: 上下同在取上, 左右同在取右

  2. 固定定位
<!-- 相对定位和绝对定位 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 1.给父元素设置相对定位 */
            position: relative; 
        }
        .box2 {
            /* 2.给子元素设置绝对定位 */
            position: absolute;
            /* 3.设置子元素在父元素中的位置 */
            right: 0; 
            bottom: 0;
            background-color: gray;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>


<!-- 扩展 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            margin: 100px;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 1.给父元素设置相对定位 */
            position: relative; 
        }
        .box2 {
            width: 50px;
            height: 50px;
            /* 2.给子元素设置绝对定位 */
            position: absolute;
            /* 3.设置子元素在父元素中的位置 */
            top: -25px; 
            right: -25px;
            border-radius: 50%;
            background-color: red;
            color: #fff;
            /* 水平居中,垂直居中 */
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"> 20 </div>
    </div>
</body>
</html>

<!-- 固定定位 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            width: 100px;
            background-color: gray;
            /* 固定定位 */
            position: fixed;
            /* 距离顶部的距离 */
            /* top: 0; */
            /* 距离底部部的距离 */
            bottom: 100px;
            /* 距离左侧的距离 */
            /* left: 0; */
            /* 距离右侧的距离 */
            right: 100px;
        }
    </style>
</head>
<body>
   <div class="box">

   </div>    
</body>
</html>

(2) box-sizing样式

  1. 一个标签可以看做是一个 "盒子"

  2. box-sizing 盒子尺寸(盒子尺寸计算方式)

    • box-sizing: content-box 盒子尺寸(width)不包含border和padding, 当给盒子设置border和padding, 盒子变大了
    • box-sizing: border-box 盒子尺寸(width)包含了border和padding, 给盒子设置border和padding, 盒子大小不变
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;}
        .box {
            height: 100px;
            background-color: green;
            width: 375px;
            border: 2px solid red;
            /* 盒子尺寸设置 */
            /* box-sizing: content-box; */
            box-sizing: border-box;
        }
    </style>
</head>
<body> 
    <div class="box"></div>
</body>
</html>

(3) display样式

display样式有三个取值

  • block 块级(独占一行)
  • inline 行内(设置宽高无效)
  • inlin-block 行内块级(不会独占一行, 可以设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div,.pp,.span {
            border: 1px solid;
            height: 100px;
        }
        .div { 
            display: block;
            display: inline;
            display: inline-block;
        } 

    </style>
</head>
<body> 
    <div class="div">
        div标签
    </div>
    <p class="pp">ppppppppppp</p>
    <span class="span">
        这是span标签
    </span>
    <span class="span">
        这是span标签
    </span> 
</body>
</html>

(4) 弹性盒子样式

  1. display:flex
  2. justify-content 水平对齐方式
  3. align-items 垂直对齐方式
  4. flex-grow 剩余空间分配
  5. flex-direction 盒子排列方向
  6. flex-wrap 换行

1.display样式

  1. block 块级(占据一行)
  2. inline 行内(不能设置宽高)
  3. inline-block 行内块级(不占一行同时可以设置宽高)
  4. flex 弹性盒子(设置一行,元素具备一些特殊功能)
  5. 其它取值
<!-- display的常见取值 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid;
            height: 100px;
            width: 100px;
            /* 默认块级,设置为inline(行内),宽高失效 */
            display: inline;
        }
        /* 行内块级可以设置框 */
        img {
            width: 100px;
            height: 100px;
        }
        /* 必须将span设置为行内块级或者块级才能设置宽高 */
        span {
            border: 1px solid;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <!-- div默认块级 -->
    <div class="box"> div </div>
    <!-- p默认块级 -->
    <p> ppppp </p>
    <!-- img默认行内块级 -->
    <img style="width: 100px;" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <!-- span默认行内 -->
    <span> span </span>
    <span> span </span>

</body> 
</html>

<!-- display:flex -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            border: 1px solid;
            /* 将父元素设置为flex(包裹层) */
            display: flex;
        }
        p {
            background-color: gray;
            border: 1px solid red;
            height: 50px;
        }
    </style>
</head>
<body> 
    <div class="box">
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <p>44444</p>
    </div> 
</body>
</html>

2.justify-content 水平对齐方式

  • flex-start 左对齐(默认)
  • center 居中对齐
  • flex-end 右对齐
  • space-around 分散对齐
  • space-between 两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            border: 1px solid;
            /* 将父元素设置为flex(包裹层) */
            display: flex;
            /* 左对齐 */
            justify-content: flex-start;
            /* 居中对齐 */
            justify-content: center;
            /* 右对齐 */
            justify-content: flex-end;
            /* 分散对齐 */
            justify-content: space-around;
            /* 两端对齐 */
            justify-content: space-between;
        }
        p {
            background-color: gray;
            border: 1px solid red;
            height: 50px;
        }
    </style>
</head>
<body> 
    <div class="box">
        <p>11111</p>
        <p>22222</p>
        <p>33333</p> 
    </div> 
</body>
</html>

3.align-items 垂直对齐方式

  • flex-start 顶部对齐(默认)
  • center 居中对齐
  • flex-end 底部对齐
<!-- align-items垂直对齐 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}

        .box {
            height: 100px;
            border: 1px solid;
            /* 将父元素设置为flex(包裹层) */
            display: flex;
            /* 左对齐 */
            justify-content: flex-start;

            /* 居中对齐 */
            justify-content: center;
            /* 右对齐 */
            justify-content: flex-end;
            /* 分散对齐 */
            justify-content: space-around;
            /* 两端对齐 */
            justify-content: space-between;
            /* 顶部对齐(默认) */
            align-items: flex-start;
            /* 居中对齐 */
            align-items: center;
            /* 底部对齐 */
            align-items: flex-end;
        }
        p {
            background-color: gray;
            border: 1px solid red;
            height: 50px;
        }
    </style>
</head>
<body> 
    <div class="box">
        <p>11111</p>
        <p>22222</p>
        <p>33333</p> 
    </div> 
</body>
</html>

<!-- 应用:元素水平居中,垂直居中 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .aa {
            width: 50px;    
            height: 50px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="aa"></div> 
    </div>
</body>
</html>

4.flex-grow 剩余空间分配

注意: .p1的宽度 = 它本身的宽度+它分配到的剩余空间(下面的例子是三分之一)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        } 
        .box {
            height: 100px;
            border: 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;
        } 
        p { 
            border: 1px solid red;
            height: 50px;
        }

        .p1 {
            flex-grow: 1;
            background-color: gray; 
        }
        .p2 {
            flex-grow: 1;
            background-color: green;
        }
        .p3 {
            flex-grow: 1;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="p1">11111</p>
        <p class="p2">22222</p>
        <p class="p3">33333</p>
    </div>
</body>

</html>

5.flex-direction 盒子排列方向 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid red;
            height: 300px;
            width: 100px;
            display: flex;
            /* 盒子排列方向row-行(默认), column-列*/
            flex-direction: column; 
            /* 当盒子排列方向时,justify-content垂直对齐方式,取值不变 */
            justify-content: space-around;
            /* 当盒子排列方向时,align-items水平对齐方式,取值不变 */
            align-items: center;
            
        }
        span {
            background-color: gray;
            width: 50px;
            height: 20px;
            border: 1px solid red;
        }
    </style>

</head>

<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

6.flex-wrap 换行

(5) 案例一: 单元格

  1. 两列单元格

    image-20211124161052849

  2. 三列单元格

    image-20211124161007099

<!-- 两列单元格 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        } 
        body {
            background-color: gray;
        } 
        .item {
            background-color: #fff;
            height: 45px;
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            /* 垂直居中 */
            align-items: center;
            padding-left:15px;
            padding-right: 15px;
        }
        .img {
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p class="item">
            <span>设置</span>
            <img class="img" src="./img/jiantou.png" alt="">
        </p>
    </div>
</body> 
</html>

<!-- 三列单元格 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: gray;
        }

        .item {
            height: 45px;
            background-color: #fff;
            display: flex;
            /* 垂直居中 */
            align-items: center;
            /* 两端对齐 */
            justify-content: space-between;
            padding-left: 15px;
            padding-right: 15px;
        }
        .img {
            height: 20px; 
        }
        .text { 
            flex-grow: 1;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div>
        <p class="item">
            <img class="img" src="./img/shangdian.png" alt="">
            <span class="text">购物</span>
            <img class="img" src="./img/jiantou.png" alt="">
        </p>
    </div>
</body> 
</html>

(6) 案例二: 顶部导航栏 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>css进阶</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        } 
        body {
            background-color: gray;
        } 
        .box {
            height: 50px;
            background-color: #fff;
            position: fixed;
            top: 0;
            width: 100%;
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            /* 垂直居中 */
            align-items: center;
            padding-left: 15px;
            padding-right: 15px;
        } 
        /* 图片宽度 */
        .box img {
            height: 16px;
        }
        /* 返回按钮 */
        .box .back {
            display: flex;
            align-items: center; 
        }
        /* 中间标题设置 */
        .box .title { 
            flex-grow: 1;
            text-align: center;
        } 
        /* 左右两边的元素都设置为50px宽, 这样中间的标题就能真正居中 */
        .w50 {
            width: 50px;
        }
    </style>

</head> 
<body> 
    <div class="box">
        <p class="back w50">
            <img src="./img/jiantou.png" alt="">
            <span>返回</span>
        </p>
        <p class="title">购物车</p>
        <span class="w50">按钮</span>
    </div>
</body>

</html>

(7) 案例三: 底部导航栏

需要用到的知识点:

  1. 固定定位
  2. 弹性盒子水平对齐, 垂直对齐
  3. 盒子排列方向

步骤:

  1. 把tab栏放置到底部
  2. 底部的tab按钮分散对齐并居中
  3. 设置tab按钮里面的内容
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css进阶</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: gray;
        }

        .box {
            background-color: #fff;
            /* 固定定位 */
            position: fixed;
            /* 1.放置在底部 */
            bottom: 0;
            /* 宽度设为100% */
            width: 100%;
            height: 50px;

            /* 2.底部的tab按钮分散对齐并居中 */
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .item { 
            /* 3.设置tab按钮里面的内容 */
            display: flex;
            /* 盒子纵向排列 */
            flex-direction: column;
            font-size: 14px;
            /* 水平居中 */
            align-items: center;
        }
        .item img {
            height: 20px;
            width: 20px;
        }
    </style>

</head>

<body>

    <div class="box">
        <p class="item">
            <img src="./img/home.png" alt="">
            <span>首页</span>
        </p>
        <p class="item">
            <img src="./img/type.png" alt="">
            <span>分类</span>
        </p>
        <p class="item">
            <img src="./img/cart.png" alt="">
            <span>购物车</span>
        </p>
        <p class="item">
            <img src="./img/wode.png" alt="">
            <span>首页</span>
        </p>
    </div>
</body>
</html>

(6) 案例四: 购物车商品列表

image-20211124170740967

(7) 一个弹性盒子的游戏

http://flexboxfroggy.com/